$(document).ready(function () {

  // 校验登录
  if (!getToken()) {
    window.location.href = "login.html";
    return;
  }

  getUser().then((response) => {
    if (response.code === 200) {
      setLoginUser(response.data);
      const username = response.data.username;
      $("#profile-username").text(username);
      $("#profile-avatar").attr(
        "src",
        `https://ui-avatars.com/api/?name=${username}&background=6366f1&color=fff`
      );

      // 生成菜单项
      response.data.menuList.forEach((menu) => {
        $(`<li>
              <a href="${menu.path}" class="menu-link">
                  <i class="bi ${menu.icon}"></i> ${menu.name}
              </a>
          </li>`).appendTo($("#menu-ul"));
      });

      // 初始化菜单高亮系统
      initMenuHighlight();
    }
  });

  // 退出
  $(".logout-btn").on("click", function (e) {
    e.preventDefault();
    removeToken();
    window.location.href = "./login.html";
  });

  $('aside').html(`
   <div class="aside-header">
            <a href="home.html" >
                <i class="bi bi-bootstrap"></i> Bootstrap
            </a>
        </div>

        <div class="aside-body">
            <ul id="menu-ul"></ul>
        </div>
  
  `);

  $('header').html(`
    <div class="d-flex align-items-center">
                <div
                        id="user-info-dropdown"
                        data-bs-toggle="dropdown"
                >
                    <img
                            id="profile-avatar"
                            src="https://ui-avatars.com/api/?name=Admin&background=6366f1&color=fff"
                            alt="用户头像"
                    />
                    <span id="profile-username">Admin</span>
                </div>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="#"
                        ><i class="fas fa-user me-2"></i>个人资料</a
                        >
                    </li>
                    <!-- <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i>设置</a></li> -->
                    <li>
                        <hr class="dropdown-divider"/>
                    </li>
                    <li>
                        <a class="dropdown-item logout-btn" href="#">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a>
                    </li>
                </ul>
            </div>
  
  `);

  $("footer").text("©2025 Simply Rugby");

});

function initMenuHighlight() {
  // 1. 直接监听菜单点击事件
  $(document).on("click", ".menu-link", function (e) {
    const href = $(this).attr("href");
    highlightMenu(href);
  });

  // 2. 页面加载时高亮当前路径
  const currentPath = window.location.pathname.split("/").pop();
  highlightMenu(currentPath);
}

function highlightMenu(currentPath) {
  if (!currentPath) return;

  console.log("Highlighting menu for:", currentPath);

  // 移除所有 active 类
  $("#menu-ul li").removeClass("active");

  // 获取基本文件名（去掉查询参数、哈希和前置路径）
  const getBaseName = (path) => {
    return path
      .split("?")[0]  // 去掉查询参数
      .split("#")[0]   // 去掉哈希
      .replace(/^.*\//, ""); // 去掉前面的路径，只保留文件名
  };

  const currentBase = getBaseName(currentPath);

  // 遍历菜单项，匹配文件名
  $("#menu-ul a.menu-link").each(function () {
    const href = $(this).attr("href");
    if (!href) return;

    const menuBase = getBaseName(href);

    // 如果文件名相同，则高亮
    if (menuBase === currentBase) {
      $(this).parent().addClass("active");
      console.log("Matched menu item:", href);
      return false; // 找到第一个匹配项后退出循环
    }
  });
}
